<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>列表</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">

		<link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="__CSS__/v1.css" media="all" />
		<link rel="stylesheet" href="__STATIC__/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="__CSS__/table.css" />
		<script type="text/javascript">
			var SYS		= {'root':'__STATIC__'},
				CONFIG	= {$pageConfig};
		</script>
	</head>
	<body>
		<div id="admin-page">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>列表页面</legend>
			</fieldset>

			<blockquote class="layui-elem-quote">
				<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
					<i class="layui-icon">&#xe608;</i> 添加信息
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="addBlank">
					<i class="layui-icon">&#xe608;</i> 添加信息窗口
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-small" id="destory">
					<i class="layui-icon">&#xe608;</i> 删除数据
				</a>
				<a href="#" class="layui-btn layui-btn-small" id="import">
					<i class="layui-icon">&#xe608;</i> 导入信息
				</a>
				<a href="#" class="layui-btn layui-btn-small">
					<i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
				</a>
				<a href="#" class="layui-btn layui-btn-small" id="getSelected">
					<i class="fa fa-shopping-cart" aria-hidden="true"></i> 获取全选信息
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="search">
					<i class="layui-icon">&#xe615;</i> 搜索
				</a>
			</blockquote>

			<fieldset class="layui-elem-field">
				<legend>分类管理</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table">
						<thead>
							<tr>
								<th width="50px"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
								<th width="50px">ID</th>
								<th>名称</th>
								<th>描述</th>
								<th>创建时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="content">
						</tbody>
					</table>
				</div>
			</fieldset>

		</div>

		<!--列表模板-->
		<script type="text/html" id="tpl">
			{{# layui.each(d, function(index, item){ }}
			{{# if(item.pid == 0) { }}
			{{# console.log(item);console.log('-------WITH-----'); }}
			<tr>
				<td><input type="checkbox" lay-skin="primary"></td>
				<th>{{ item.id }}</th>
				<td>{{ item.title }}</td>
				<td>{{ item.description }}</td>
				<td>{{# if(item.site){ }}
				123
				{{# } }}
				{{item.create_time}}
				</td>
				<td data-key="{{ item.id }}">
					<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
					<a href="javascript:;" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
					<a href="javascript:;" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
				</td>
			</tr>
			
			{{# var iid = item.id;layui.each(d, function(index, item){ }}

			
			{{# if(item.pid == iid) { }}


			<tr bgcolor="#ccc">
				<td><input type="checkbox" lay-skin="primary"></td>
				<th>{{ item.id }}</th>
				<td>||++++++{{ item.title }}</td>
				<td>{{ item.description }}</td>
				<td>
				{{item.create_time}}
				</td>
				<td data-key="{{ item.id }}">
					<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-mini">预览</a>
					<a href="javascript:;" data-opt="edit" class="layui-btn layui-btn-mini">编辑</a>
					<a href="javascript:;" data-opt="del" class="layui-btn layui-btn-danger layui-btn-mini">删除</a>
				</td>
			</tr>

			{{# console.log(item); }}

			{{# } }}


			{{# }); }}
			{{# } }}

			{{# console.log('_______________END______________'); }}

			{{# }); }}
		</script>
		<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
		<script type="text/javascript" src="__STATIC__/admin/js/admin.js"></script>
		<script type="text/javascript">
			layui.use(['laytpl','form','jquery'] , function(){
			  var	laytpl = layui.laytpl,
			 		layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer, //获取当前窗口的layer对象
					form = layui.form(),
					element = layui.element,
					$ = layui.jquery;
			  //使用方式跟独立组件完全一样

				var sonsTree = function(arr,id){
				    var temp = [],lev=0,index = 0;
				    var forFn = function(arr, id,lev){
				        for (var i = 0; i < arr.length; i++) {
				            var item = arr[i];
				            if (item.pid==id) {
				                item.lev=lev;
				                temp[index] = item;
				                index = index+1;
				                forFn(arr,item.id,lev+1);
				            }
				        }
				    };
				    forFn(arr, id,lev);
				    return temp;
				}

				var data =  {$pageLists};

				var son = sonsTree(data,0);

				var getTpl = tpl.innerHTML;

				laytpl(getTpl).render(son, function(html){
				  content.innerHTML = html;
				});

				form.render('checkbox');
				form.on('checkbox(allselector)', function(data) {
					var elem = data.elem;
					$('#content').children('tr').each(function() {
						var $that = $(this);
						//全选或反选
						$that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
						form.render('checkbox');
					});
				});



				//操作定义块
				var addBoxIndex = -1;
  				var catAction = {
  					destory: function(id){
						if(id.length == 0) return false;
  						layer.confirm('确定要删除 <span style="color:red;">'+JSON.stringify(id)+'</span> 吗?', {
						time:0,icon:3,title:'系统提示'}, function(){
						$.ajax(
							{
								type:'get',
								url:"/admin/category/destroy/",
								async : true,
								data : {
									"type": 'delete',
									"id" : id
								},
								dataType : "json",
								beforeSend:function(){console.log('beforeSend');},
								success:function(data){
									//移除元素
									$('#content').children('tr').each(function(){
										$this = $(this);
										if($.inArray(Number($this.children('td[data-key]').data('key')),id) > -1 || Number($this.children('td[data-key]').data('key')) == id)
											$this.remove();
									});
									//提示消息
									layer.msg(data.msg);
								},
								error:function(){console.log('error');},
							}
							
							);


						}, function(){

						layer.msg('取消选择', {time: 20000});
					});
  					},
  					form:function(id){

						if(addBoxIndex !== -1)
							return;
						//本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
						$.get('editForm.html', {'id':id}, function(form) {
							addBoxIndex = layer.open({
								type: 1,
								title: '分类管理-编辑分类',
								content: form,
								btn: ['保存', '取消'],
								shade: [0.8, '#393D49'],
								offset: ['20%', '30%'],
								area: ['40%', '600px'],
								zIndex: 100,
								maxmin: true,
								yes: function(index) {
									//触发表单的提交事件
									$('form.layui-form').find('button[lay-filter=edit]').click();
								},
								full: function(elem) {
									var win = window.top === window.self ? window : parent.window;
									$(win).on('resize', function() {
										var $this = $(this);
										elem.width($this.width()).height($this.height()).css({
											top: 0,
											left: 0
										});
										elem.children('div.layui-layer-content').height($this.height() - 95);
									});
								},
								success: function(layero, index1) {
									//弹出窗口成功后渲染表单
									var form = layui.form();
									form.render();
									form.on('submit(edit)', function(d) {
										layer.confirm('确定提交吗?',{icon: 3, title:'提示'},function(index2){
											//提交
										var newData = d.field;
										$.ajax(
											{
												type:'post',
												url:"/admin/category/save/",
												async : true,
												data : newData,
												dataType : "json",
												beforeSend:function(){console.log('beforeSend');},
												success:function(res){
													//提示消息
													if(res.msg == null){
														layerTips.msg('并未更改数据');
														
													}else{
														layerTips.msg('提示:'+res.msg);
													}
													if(res.code == 1){
														location.reload();
													}else{
														layer.close(index1);
													}

												},
												error:function(){console.log('error');},
											}
											
											);

											layer.close(index2);

											
										});
										//这里可以写ajax方法提交表单
										return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。									
									});
									//console.log(layero, index);
								},
								end: function() {
									addBoxIndex = -1;
								}
							});
						});


  					},
  					test:function(){}
  				};


  				//按钮绑定
				$('#content').children('tr').each(function () {
				$(this).children('td:last-child').children('a').each(function () {
				    var $that = $(this);
				    var action = $that.data('opt');
				    var id = $that.parent('td').data('key');
				    $that.on('click', function () {
				        switch (action) {
				            case 'edit':
				                catAction.form(id);
				                break;
				            case 'del': //删除
				                var name = $that.parent('td').siblings('td[data-field=title]').text();
				                //询问框
				                catAction.destory(id);
				                break;
				        }
				    });
				});
				});
				$('#add').click(function(){
					catAction.form(0);
				});




			});
		</script>
	</body>
</html>